<template>
  <div class="galary-content">
    <div class="wrapper">
      <div class="imgWrapper"
       v-for="item of imgList[this.index][this.index]"
       :key="item.id"
      >
        <img :src="item.imgUrl"
         @click="handlePictureClick">
      </div>
    </div>
    <div class="galary"
          v-show="show"
          :length="length"
          >
      <swiper :options="swiperOption">
        <swiper-slide
          v-for="item of imgList[this.index][this.index]"
          :key="item.id"
          >
          <div class="galary-desc">
          {{parseInt(item.id)+1}}/{{length}}</div>
          <div class="galary-img">
            <img
            :src="item.imgUrl"
            >
          </div>
        </swiper-slide>
      </swiper>
       <span class="cancelBtn"
        @click="handlePictureBackClick"
        >X</span>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:"galaryContent",
  props:{
      imgList:Array
    },
  computed:mapState(['index']),
  methods:{
    handlePictureClick(){
      this.length = this.imgList[this.index][this.index].length
      this.show=true
    },
        handlePictureBackClick(){
          this.show=false
        }
  },
  data(){
    return{
      length:1,
      show:false,
      swiperOption:{
        loop:false,
      },
  }

}}
</script>

<style lang="stylus" scoped>
.wrapper
    background:#fff
    .imgWrapper
      width:46%
      background:#aaa
      margin:.12rem
      float:left
    .imgWrapper > img
      width:100%
.galary
  position:absolute
  top:-0.86rem
  left:0
  right:0
  bottom:0
  background:#000
  color:#fff
  .galary-desc
    text-align:center
    font-size:.3rem
    padding:1.2rem
  .galary-img
    margin-top:2rem
  .galary-img>img
    width:100%
  .swiper-pagination
    color:#fff
    bottom:7.5rem
  .cancelBtn
    font-size:.5rem
    position:relative
    left:3.5rem
    bottom:-2rem
    color:#fff
</style>
